<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/web/commons/global.jsp"%>

<div>
	<!--宽度是745 每行有3列-->
	<div class="audios-wrapper" data-width="745" data-item="3">
		<c:forEach items="${audios}" varStatus="audioStatus_top">

			<c:if test="${audioStatus_top.index % 3 == 0 }">
				<div class="audios">
					<c:forEach items="${audios}" var="audio"
						begin="${audioStatus_top.index}"
						end="${audioStatus_top.index + 2 }">

						<div class="audio">
							<div class="img-div">
								<a href="${baseUrl }/audio/${audio.id }.html"> <img
									class="img" src="${audio.coverUrl }" />
								</a>
								<c:if test="${audio.progressStatus == 2}">
									<div class="tip-wrapper">
										<div class="tip-text">
											完<br />结
										</div>
										<div class="tip-bottom"></div>
									</div>
								</c:if>
							</div>
							<div class="content-div">
								<div class="content-div-title">
									<a href="${baseUrl }/audio/${audio.id }.html">
										<h2 class="title">${audio.title }</h2>
									</a>
								</div>
								<div class="common-bars-wrapper">
									<div class="bars">
										<div class="bar" style="float: left">
											<i class="icon-star"></i> <i class="icon-star"></i> <i
												class="icon-star"></i> <i class=" icon-star-half"></i> <i
												class="icon-star undertone"></i>
										</div>
										<div class="bar" style="float: right">
											<c:choose>
												<c:when test="${not empty audio.rFavoriteSource }">
													<i class="icon-heart"></i>
												</c:when>
												<c:otherwise>
													<i class="icon-heart undertone"></i>
												</c:otherwise>
											</c:choose>
										</div>
										<div class="clear-both"></div>
									</div>
								</div>

								<div class="desc hid">${audio.info }</div>
								<div class="vertical-spacing-10"></div>


								<div class="cur-audio"
									style="height: 15px; font-size: 13px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap;">
									<c:if test="${not audio.entity }">
										<a
											href="${baseUrl }/audio/${audio.childAudios[audio.countCognate - 1].id }.html">
											<span class="cur-audio-title"><i
												class="icon-play-circle"></i> 第${audio.countCognate }集</span> <span
											class="cur-audio-desc">${audio.title
												}最新${audio.countCognate }集 </span>
										</a>
									</c:if>
								</div>

								<div class="time">
									<div>
										<span>${audio.countCognate }集 ${audio.showTime }</span>
									</div>
									<div>
										<span>${audio.statistics.showCountWatch }</span>
									</div>
									<div class="clear-both"></div>
								</div>
							</div>
						</div>
					</c:forEach>
				</div>
			</c:if>
		</c:forEach>
	</div>
	<div class="vertical-spacing-20"></div>
	<div class="audio-pagination-wrapper">
		<div class="content">
			<ul class="pagination page-ul">

				<c:if test="${pagination.index > 1}">
					<li class="page-item"><a href="javascript:;"
						onclick="getTagAudioList(${tag.id},${pagination.index - 1})">&laquo;</a></li>
					<li class="page-item"><a href="javascript:;"
						onclick="getTagAudioList(${tag.id},1)">首页</a></li>
				</c:if>

				<c:forEach begin="${pagination.index }"
					end="${pagination.index + 7}" varStatus="pageStatus">
					<c:if test="${pageStatus.index <= pagination.pages}">
						<c:choose>
							<c:when test="${pageStatus.first }">
								<li class="page-item cur-page"><a href="javascript:;">${pageStatus.index
										}</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a href="javascript:;"
									onclick="getTagAudioList(${tag.id},${pageStatus.index })">${pageStatus.index
										}</a></li>
							</c:otherwise>
						</c:choose>
					</c:if>
				</c:forEach>

				<c:if test="${pagination.index < pagination.pages}">
					<li class="page-item"
						onclick="getTagAudioList(${tag.id},${pagination.index + 1})"><a
						href="javascript:;">&raquo;</a></li>
					<li class="page-item"
						onclick="getTagAudioList(${tag.id},${pagination.pages} )"><a
						href="javascript:;">尾页</a></li>
				</c:if>

				<!-- 													<li class="page-item has-more"><a href="javascript:;">&hellip;</a></li> -->
			</ul>
		</div>

	</div>

</div>

<script>
/**
 * 从新初始化每一列的宽度
 */
$(function() {
	// 音频div包装对象
	var _AUDIOS_WRAPPER_ = $('.audios-wrapper');
	var _AUDIOS_WRAPPER_WIDTH_ = _AUDIOS_WRAPPER_.data('width');

	_AUDIOS_WRAPPER_.width(_AUDIOS_WRAPPER_WIDTH_);
	var _AUDIOS_ITEM_ = _AUDIOS_WRAPPER_.data('item');

	// 每个音频
	var _AUDIO_ = _AUDIOS_WRAPPER_.find('.audios .audio');
	var _AUDIO_WIDTH_ = (_AUDIOS_WRAPPER_WIDTH_ - (_AUDIOS_ITEM_ * 2) - ((_AUDIOS_ITEM_ - 1) * 20))
			/ _AUDIOS_ITEM_;
	_AUDIO_.width(_AUDIO_WIDTH_);
	// 每个音频的图片

	// 修正图片的宽度
	var _AUDIO_IMG_ = _AUDIOS_WRAPPER_.find('.audios .audio .img-div img');
	_AUDIO_IMG_.width(_AUDIO_WIDTH_);

	// 修正 完结等提示的左移位置
	var _AUDIO_TIP_WRAPPER_ = _AUDIOS_WRAPPER_
			.find('.audios .audio .img-div .tip-wrapper');
	_AUDIO_TIP_WRAPPER_.css('margin-left', (_AUDIO_WIDTH_ - 20) + 'px');

});

/**
 * 音频列表布局
 */
$(function() {
	// 音频div包装对象
	var _AUDIOS_WRAPPER_ = $('.audios-wrapper');
	// 音频列
	var _AUDIOS_ = _AUDIOS_WRAPPER_.find('.audios');
	// 音频列个数
	var _AUDIOS_LENGTH_ = _AUDIOS_.length;
	// 音频div包装对象 初始高度
	var _AUDIOS_WRAPPER_HEIGHT_ = 0;
	// 音频列显示优先级
	var _AUDIOS_WRAPPER_Z_INDEX_ = 1000;
	// 每个音频列间距10px
	var _AUDIOS_MARGIN_TOP_ = 10;

	// 第一个音频列定义高度
	var _AUDIOS_FIRST_HEIGHT_ = 0;
	_AUDIOS_.each(function(inx, val) {
		var _this = $(val);
		if (inx == 0) {
			_AUDIOS_FIRST_HEIGHT_ = _this.height(); // 初始化第一个音频列高度
		}

		if (inx == (_AUDIOS_LENGTH_ - 1)) {
			_AUDIOS_WRAPPER_HEIGHT_ = _AUDIOS_WRAPPER_HEIGHT_ + _this.height(); // 增加音频div包装对象高度
		} else {
			_AUDIOS_WRAPPER_HEIGHT_ = _AUDIOS_WRAPPER_HEIGHT_ + _this.height()
					+ _AUDIOS_MARGIN_TOP_;
		}

		_this.css('z-index', _AUDIOS_WRAPPER_Z_INDEX_--); // 设置优先级
		if (inx > 0) {
			_this.css('margin-top',
					(_AUDIOS_FIRST_HEIGHT_ * inx + _AUDIOS_MARGIN_TOP_ * inx)
							+ 'px'); // 设置音频列间距
		}
	});
	_AUDIOS_WRAPPER_.height(_AUDIOS_WRAPPER_HEIGHT_); // 音频div包装对象高度

	_AUDIOS_.find('.audio').hover(function() {
		var _this = $(this);
		_this.find('.content-div .desc').show();
	}, function() {
		var _this = $(this);
		_this.find('.content-div .desc').hide();
	});
});
</script>